import { View, Image, Text } from '@tarojs/components'
import styles from './index.module.scss'

import iconList from '@/static/icons/view-list.svg'
import TodoItem from './components/TodoItem'

export default function Index() {
    return (
        <View>
            <View className={styles.days}>
                <View className={styles.completionCount}>
                    <Text>第</Text>
                    <Text>1天</Text>
                </View>
            </View>
            <View className={styles.skeleton}></View>
            <View className={styles.data}>
                <View className={styles.dataItem}>
                    <View className={styles.dataItemValue}>0°-60°</View>
                    <View className={styles.dataItemLabel}>关节灵活度</View>
                </View>
                <View className={styles.dataItem}>
                    <View className={styles.dataItemValue}>
                        <Text>1-2</Text>
                        <Text className={styles.unit}>Kg</Text>{' '}
                    </View>
                    <View className={styles.dataItemLabel}>肌肉力量</View>
                </View>
                <View className={styles.dataItem}>
                    <View className={styles.dataItemValue}>
                        <Text>15</Text>
                        <Text className={styles.unit}>Min</Text>
                    </View>
                    <View className={styles.dataItemLabel}>训练时长</View>
                </View>
                <View className={styles.dataItem}>
                    <View className={styles.dataItemValue}>
                        <Text>87</Text>
                        <Text className={styles.unit}>Bpm</Text>
                    </View>
                    <View className={styles.dataItemLabel}>平均心率</View>
                </View>
            </View>
            <View className={styles.title}>
                <View className={styles.titleIconLeft}>
                    <Image className='icon' src={iconList} />
                </View>
                <View className={styles.titleText}>历史训练</View>
            </View>
            <View>
                <TodoItem
                    title='肘关节活动度训练'
                    duration='10Min'
                    flexibility='0°-60°'
                />
                <TodoItem
                    title='肘关节活动度训练'
                    duration='10Min'
                    flexibility='0°-60°'
                />
            </View>
        </View>
    )
}
